import * as React from "react";
import {Button, Table, Switch} from 'antd';

const COLUMNS = [{
  title: "字段名",
  dataIndex: 'columnName',
  width: '65%',
}, {
  title: '设置主键',
  render: (text, record) => {
    return (
      <Checkbox onChange={(e) => {
        const value = e.target.checked;
        const name = text.columnName;
        this.props.handleKeyChange(name, value);
      }} checked={text.pk}><Icon type="key"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Checkbox>
    )
  }
}];
const Tables = ({columns, tableName}) => {
  return (
    <div className="web-datasource-tableinfo flex-grow-1">
      <div className="web-datasource-tableinfo-top">
        <Button type="primary">保存</Button>
      </div>
      <div className="web-datasource-tableinfo-body">
        {
          tableName ? <div>
          {tableName}：
          <Switch checkedChildren="加入对比" unCheckedChildren="不加入对比"/>
            <br/>
            <br/>
          </div> : null
        }
        <Table
          className=""
          columns={COLUMNS}
          dataSource={columns}
          pagination={false}
          bordered={true}
        />
      </div>
    </div>
  );
}

export default Tables;
